<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Cache" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link
      rel="stylesheet"
      href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default-v2.min.css"
    />
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script>
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        bottom: 0;
        list-style: none;
        text-decoration: none;
      }
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
        background-color: rgb(170, 190, 250);
      }
      .shell {
        width: 900px;
        height: 500px;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        border: 10px #fff solid;
        box-shadow: 20px 30px 20px rgba(170, 190, 250, 0.5);
      }
      .images {
        width: 300%;
        height: 100%;
        display: flex;
        position: absolute;
        left: 0;
        transition: 0.2s;
      }
      .img {
        width: 100%;
        background-size: cover;
      }
      .img:nth-child(1) {
        background-image: url("2.jpg");
      }
      .img:nth-child(2) {
        background-image: url("3.jpg");
      }
      .img:nth-child(3) {
        background-image: url("4.jpg");
      }
      /* .img:nth-child(4) {
        background-image: url("https://picsum.photos/1200/676");
      } */
      .min-images {
        display: flex;
        justify-content: space-evenly;
        position: absolute;
        bottom: 20px;
        width: 40%;
        z-index: 999;
        right: 10%;
      }
      .min {
        width: 60px;
        height: 60px;
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        border: solid 5px rgba(255, 255, 255, 0.5);
        background-position: -20px 0;
      }
      .min:nth-child(1) {
        background-image: url("2.jpg");
      }
      .min:nth-child(2) {
        background-image: url("3.jpg");
      }
      .min:nth-child(3) {
        background-image: url("4.jpg");
      }
      /* .min:nth-child(4) {
        background-image: url("https://picsum.photos/200/100");
      } */
      .button {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        justify-content: space-between;
        user-select: none;
      }
      .button-left,
      .button-right {
        font-size: 50px;
        background-color: rgba(160, 190, 255, 0.7);
        padding: 0 20px;
        line-height: 500px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="shell">
      <ul class="images">
        <li class="img"></li>
        <li class="img"></li>
        <li class="img"></li>
        <!-- <li class="img"></li> -->
      </ul>
      <ul class="min-images">
        <li class="min"></li>
        <li class="min"></li>
        <li class="min"></li>
        <!-- <li class="min"></li> -->
      </ul>
      <div class="button">
        <div class="button-left">《</div>
        <div class="button-right">》</div>
      </div>
    </div>
  </body>
  <script>
    let left = document.querySelector(".button-left");
    let right = document.querySelector(".button-right");
    let min = document.querySelectorAll(".min");
    let images = document.querySelector(".images");
    // 先设置一个index用来计算和控制图片的位置，再设置一个time作为定时器
    let index = 0;
    let time;
    // 在这里先创建一个position为复用函数，作用就是结合index来定义当前图片的位置的
    function position() {
      images.style.left = index * -100 + "%";
    }
    // 然后创建一个复用函数add为加函数，如果当前图片的位置值index大于等于当前图片数量的话，就说明超出了计算范围，所以得清零，如若不然index就加一
    function add() {
      if (index >= min.length - 1) {
        index = 0;
      } else {
        index++;
      }
    }
    // 反之desc为减函数，如果当前图片的位置值index小于1了，那么他的值就反弹到最顶端，也就是轮播图的最后面，如若不然index就减一
    function desc() {
      if (index < 1) {
        index = min.length - 1;
      } else {
        index--;
      }
    }
    // 创建一个timer来当做复用时间的函数，，每隔3秒钟index就加一，然后加入增加add函数和desc函数来判断一下，再加入定位函数
    function timer() {
      time = setInterval(() => {
        index++;
        desc();
        add();
        position();
      }, 3000);
    }
    // 接下来设置一下按钮，left为左边的按钮，因为点击时图片会反方向倒退，所以套入desc减函数进去，顺便定位一下
    // 当然，点击的时候必须先把定时器给停掉再重新执行一遍，不然会在点击下一张图片时，定时器倒计时一到也跟着生效，这样子就会连跳两张图片了
    left.addEventListener("click", () => {
      desc();
      position();
      clearInterval(time);
      timer();
    });
    // 右边的按钮和左边也是差不多
    right.addEventListener("click", () => {
      add();
      position();
      clearInterval(time);
      timer();
    });
    // 在弄好左右两个按钮的时候，还需要生效下面的小图片按钮，
    // 先遍历一遍，然后获取当前点击的那个小图片按钮的值并赋值给index，这样子就可以随之跳转
    for (let i = 0; i < min.length; i++) {
      min[i].addEventListener("click", () => {
        index = i;
        position();
        clearInterval(time);
        timer();
      });
    }
    // 最后的最后我们将定时器开起来，这样子图片就可以自动轮播
    timer();
  </script>
</html>
